<template>
    <div class="songs-container">
        <div class="tab_bar">
           <span class="item" :class="{active:type == 0}" @click="type = 0">全部</span>
           <span class="item" :class="{active:type == 7}" @click="type = 7">华语</span>
           <span class="item" :class="{active:type == 96}" @click="type = 96">欧美</span>
           <span class="item" :class="{active:type == 8}" @click="type = 8">日本</span>
           <span class="item" :class="{active:type == 16}" @click="type = 16">韩国</span>
        </div>
        <!--表格-->
    <el-table :data="songsList" style="width: 100%">
      <el-table-column type="index"></el-table-column>
      <el-table-column width="120">
         <template slot-scope="scope">
              <div class="img_box">
              <img :src="scope.row.album.picUrl" alt="">
              <p @click="playMise(scope.row.id)"><span class="el-icon-caret-right active"></span></p>
              </div>
         </template>
      </el-table-column>
      <el-table-column label="音乐标题" width="300">
            <template slot-scope="scope">
                {{scope.row.name}}
                <span v-if="scope.row.mvid !=0" class="el-icon-video-camera active" @click="playMv(scope.row.id)"></span>
            </template>
      </el-table-column>
      <el-table-column prop="artists[0].name" label="歌手" width="200"></el-table-column>
      <el-table-column prop="album.name" label="专辑" width="350"></el-table-column>
      <el-table-column label="时长">
        <template slot-scope="scope">
             {{scope.row.duration | formatDuration}}
        </template>
      </el-table-column>
    </el-table>
    </div>
</template>

<script>
export default {
    data () {
        return {
            //导航条的默认样式已经默认显示数据
            type:0,
            //最新歌单全部数据
            songsList:[],
        }
    },
    watch:{
       type () {
           this.getSongsList()
       }
    },
    created() {
        this.getSongsList()
    },
    methods:{
     async getSongsList () {
         const res = await this.$http.get('https://autumnfish.cn/top/song',{params:{type:this.type,limit:10}})
            if(res.data.code == 200){
                this.songsList = res.data.data
                //设置时间
                // for(let i = 0;i<this.songsList.length;i++){
                //     //获取所有的毫秒秒
                //    let duration = this.songsList[i].duration
                //     //分
                //     let min = parseInt(duration/1000/60)
                //     if(min<10){
                //        min = '0' + min
                //     }
                //     //秒
                //     let sec = parseInt(duration/1000%60)
                //     if(sec<10){
                //        min = '0' + min
                //     }
                //     this.songsList[i].duration = `${min}:${sec}`
                // }
            }
           
      },
     async playMise (id) {
         const res = await this.$http.get('https://autumnfish.cn/song/url',{params:{id}})
         if(res.data.code == 200){
             let url = res.data.data[0].url
             this.$parent.url = url
         }
      },
      playMv (id) {
         this.$router.push(`/mv?id=${id}`)
      }
    }
}
</script>

<style lang="less" scoped>
     .songs-container{
         .tab_bar{
             display: flex;
             justify-content: flex-end;
            .item{
               font-size: 15px;
               color: grey;
               margin-right: 20px;
               cursor: pointer;
            }
         }
     }
     .el-table{
         .img_box{
            img{
                width: 70px;
                height: 70px;
                border-radius: 5px;
            }
            span{
                cursor: pointer;
            }
            p{
                position: absolute;
                left: 30px;
                top: 30px;
                font-size: 28px;
                background: white;
                border-radius: 50%;
                opacity: 0;
            }             
         }
         .img_box:hover p{
             opacity: 1;
         }
         span{
             cursor: pointer;
         }
     }
</style>